@import './rem';



.selector-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0, 0, 0, .5);

	opacity: 0;

	z-index: 99999;

	-webkit-transition: opacity 0.3s;

	&.show {
		opacity: 1;
	}
}


.selector-box {
	@head-h: 80/75rem;
	@body-h: 350/75rem;

	@box-h: @head-h + @body-h;

	width: 100%;
	height: @box-h;

	position: fixed;

	bottom: -@box-h;
	-webkit-transform: translate3d(0, 0, 0);

	background: #fff;
	overflow: hidden;

	z-index: 100000;

	-webkit-transition: -webkit-transform 0.3s;

	&.show {
		-webkit-transform: translate3d(0, -@box-h, 0);
	}

	.head {
		width: 100%;
		height: @head-h;

		position: relative;
		z-index: 2;

		background: #F0F4F6;

		&>div {
			.px2rem(width, 100);
			height: @head-h;
			line-height: @head-h;
			.px2rem(font-size, 30);
			text-align: center;
		}

		.cancel {
			color: #292F33;
			float: left;
		}

		.sure {
			color: #01CBFD;
			float: right;
		}
	}

	.body {
		width: 100%;
		height: @body-h;
		position: relative;
		overflow: hidden;


		&>ul {
			float: left;
			padding: 0;
			padding-top: 100px;
			padding-bottom: 200px;
			margin: 0;
			margin-top: -100px;
			position: relative;
			z-index: 1;



			// -webkit-transition: -webkit-transform 0.5s;


			&>li {
				list-style: none;
				.px2rem(font-size, 27);
				// height: 100px;
				// line-height: 100px;
				.px2rem(height, 100);
				.px2rem(line-height, 100);
				color: #8899A6;
				// text-align: center;
				padding: 0 10px;
				-webkit-transition-duration: 0.3s;

				overflow: hidden;

				&.choose {
					color: #292F33;
					.px2rem(font-size, 30);
				}
			}
		}

		&>div {
			width: 100%;
			// height: 100px;
			// top: 100px;
			.px2rem(height, 100);
			.px2rem(top, 100);
			border-top: 1px solid #E2E8ED;
			border-bottom: 1px solid #E2E8ED;
			position: absolute;
			z-index: 0;
		}

	}


}
